// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@use "ds/_sizes.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/typography.scss" as *;

.notification-pill {
  @include use-typography("body-medium");

  --notification-bg-color: var(--color-background-primary);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-background-quaternary);
  --notification-padding: var(--sp-m);
  --notification-icon-color: var(--color-foreground-secondary);
  --notification-icon-margin: var(--sp-xxs);

  background-color: var(--notification-bg-color);
  border: $b-1 solid var(--notification-border-color);
  border-radius: $br-8;
  padding: var(--notification-padding);

  display: flex;
  gap: var(--sp-s);

  color: var(--notification-fg-color);

  // Targets the potential links included by the creator in the children props.
  & a {
    color: var(--color-accent-primary);
    text-decoration: none;
  }
}

.type-toast {
  padding-inline-end: var(--sp-xxxl);
}

.appearance-ghost {
  background-color: transparent;
}

.level-default {
  --notification-bg-color: var(--color-background-default);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-default);
  --notification-icon-color: var(--color-icon-default);
}

.level-info {
  --notification-bg-color: var(--color-background-info);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-info);
  --notification-icon-color: var(--color-accent-info);
}

.level-error {
  --notification-bg-color: var(--color-background-error);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-error);
  --notification-icon-color: var(--color-accent-error);
}

.level-warning {
  --notification-bg-color: var(--color-background-warning);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-warning);
  --notification-icon-color: var(--color-accent-warning);
}

.level-success {
  --notification-bg-color: var(--color-background-success);
  --notification-fg-color: var(--color-foreground-primary);
  --notification-border-color: var(--color-accent-success);
  --notification-icon-color: var(--color-accent-success);
}

.icon {
  flex-shrink: 0;
  color: var(--notification-icon-color);
  margin-block-start: var(--notification-icon-margin);
}

.notification-pill {
  display: grid;
  max-height: 92vh;
  overflow: hidden;
}

.with-detail {
  grid-template-rows: auto 1fr;
}

.error-message {
  display: flex;
  gap: var(--sp-s);
}

.error-detail {
  overflow: auto;
}

.error-detail-title {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.expand-icon {
  --icon-fill-color: var(--color-foreground-primary);
  --icon-stroke-color: var(--color-foreground-primary);
}

.error-detail-content {
  padding-left: var(--sp-xxxl);
}
